@use '../../styles/variables';

.auto-complete {
  position: relative;
  
  .auto-complete-input {
    position: relative;
    
    .auto-complete-loading {
      position: absolute;
      top: 50%;
      right: 10px;
      transform: translateY(-50%);
      color: variables.$gray-600;
    }
  }

  .suggestion-list {
    list-style: none;
    padding-left: 0;
    white-space: nowrap;
    position: absolute;
    background: variables.$white;
    z-index: 100;
    top: 100%;
    left: 0;
    border: variables.$border-width solid variables.$input-border-color;
    box-shadow: variables.$submenu-box-shadow;
    width: 100%;
    .suggestion-item {
      padding: variables.$input-padding-y variables.$input-padding-x;
      cursor: pointer;
      transition: all 0.2s;
      color: variables.$body-color;
      &.is-active {
        background-color: variables.$primary;
        color: variables.$white;
      }
      &:hover {
        color: variables.$primary;
      }
    }
  }
} 